<template>
	<view class="page">
		<view class="ship_info">
			<view class="si_item">
				<view class="sii_top">
					<view class="siit_texts">
						<text>{{goInfo.date}}</text>
						<text>{{goInfo.week}}</text>
						<text>{{goInfo.lineNum+''+goInfo.sx}}次 | {{goInfo.clxm}} </text>
					</view>
				</view>
				<view class="sii_info" v-if="!goInfo.busStartTime">
					<view class="siii_left">{{goInfo.sailTime}}</view>
					<view class="siii_right">
						<image src="@/static/index/steamerTicket/icon_line2.png"></image>
						<view class="siir_place">
							<text>{{goInfo.startPortName}}</text>
							<text>{{goInfo.endPortName}}</text>
						</view>
					</view>
				</view>
				<view class="sii_info ta_car_ship" v-else>
					<view class="ta_time">
						<text>{{goInfo.busStartTime}} 开车</text>
						<text>{{goInfo.sailTime}} 开船</text>
						<text style="color: transparent;margin-top: 0;">d</text>
					</view>
					<view class="ta_addr">
						<image src="https://i.ringzle.com/file/20240325/b68b2d2aa04f4c50b70ebe13341f25ec.png" mode=""></image>
						<view>
							<text>{{goInfo.startPortName||''}}</text>
							<text>{{goInfo.embarkPortName||''}}</text>
							<text>{{goInfo.endPortName||''}}</text>
						</view>
					</view>
				</view>
				<view class="sii_no"><span>第</span><span>1</span><span>程</span></view>
			</view>
			<view class="si_item">
				<view class="sii_top">
					<view class="siit_texts">
						<text>{{backInfo.date}}</text>
						<text>{{backInfo.week}}</text>
						<text>{{backInfo.lineNum+''+backInfo.sx}}次 | {{backInfo.clxm}} </text>
					</view>
				</view>
				<view class="sii_info">
					<view class="siii_left">
						<block v-if="goInfo.busStartTime">{{backInfo.sailTime}} 开船</block>
						<block v-else>{{backInfo.sailTime}}</block>
					</view>
					<view class="siii_right">
						<image src="@/static/index/steamerTicket/icon_line2.png"></image>
						<view class="siir_place">
							<text>{{backInfo.startPortName}}</text>
							<text>{{backInfo.endPortName}}</text>
						</view>
					</view>
				</view>
				<view class="sii_no sii_no_2"><span>第</span><span>2</span><span>程</span></view>
			</view>
		</view>
		<view class="seat_info">
			<view class="si_pre">
				<view class="sip_title">第1程舱位</view>
				<view class="sip_box">
					<u-scroll-list :indicator="false">
						<view class="cct_items" v-for="(card,idx) in goInfo.seatClasses" :key="idx"
							@tap="(hasLocal?card.totalCount:card.pubCurrentCount)!=0?selectTicket(idx,1):''"
							:class="(hasLocal?card.totalCount:card.pubCurrentCount)==0?'cactive':(card.shipselected?'sactive_go':'')">
							<image :src="cic.cabinBackImg[card.className]||cic.defaultBackImg"></image>
							<view class="cct_info">
								<view class="ccti_title">{{card.className}}</view>
								<view class="ccti_tickets">
									<text>公共舱余票 {{card.pubCurrentCount}}张</text>
									<text v-if="hasLocal">本地舱余票 {{card.localCurrentCount}}张</text>
								</view>
								<view class="ccti_price">￥<text>{{!hasLocal?card.totalPrice:card.localPrice}}</text>
								</view>
							</view>
							<image class="ccti_bg" v-if="card.shipselected"
								src="https://i.ringzle.com/file/20240221/0025c3f34b924f6b8a0c70ff4097cfa5.png">
							</image>
						</view>
					</u-scroll-list>
				</view>
			</view>
			<view class="si_pre">
				<view class="sip_title">第2程舱位</view>
				<view class="sip_box">
					<u-scroll-list :indicator="false">
						<view class="cct_items" v-for="(card,idx) in backInfo.seatClasses" :key="idx"
							@tap="(hasLocal?card.totalCount:card.pubCurrentCount)!=0?selectTicket(idx,2):''"
							:class="(hasLocal?card.totalCount:card.pubCurrentCount)==0?'cactive':(card.shipselected?'sactive_back':'')">
							<image :src="cic.cabinBackImg[card.className]||cic.defaultBackImg"></image>
							<view class="cct_info">
								<view class="ccti_title">{{card.className}}</view>
								<view class="ccti_tickets">
									<text>公共舱余票 {{card.pubCurrentCount}}张</text>
									<text v-if="hasLocal">本地舱余票 {{card.localCurrentCount}}张</text>
								</view>
								<view class="ccti_price">￥<text>{{!hasLocal?card.totalPrice:card.localPrice}}</text>
								</view>
							</view>
							<image class="ccti_bg" v-if="card.shipselected"
								src="https://i.ringzle.com/file/20240221/0025c3f34b924f6b8a0c70ff4097cfa5.png">
							</image>
						</view>
					</u-scroll-list>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="btn" @tap="toNext">下一步</view>
		</view>
		<GetPhoneNumber ref="phoneNumber" @loginSuccess="loginSuccess"></GetPhoneNumber>
	</view>
</template>

<script>
	import GetPhoneNumber from '@/compoments/Getphonenumber/index.vue'
	export default {
		components: {
			GetPhoneNumber
		},
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight - 60,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				goInfo: null,
				backInfo: null,
				weekCfg: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
				hasLocal: false, //是否包含本地人
				cic: this.$cic,
			}
		},
		methods: {
			init(item){
				let data = {
					selectGoInfo:item.goInfo,
					selectBackInfo:item.backInfo
				}
				this.dealData(data);
				this.getIsLocal();
			},
			dealData(data) {
				this.goInfo = data.selectGoInfo;
				this.backInfo = data.selectBackInfo;
				this.goInfo.date = new Date(this.goInfo.sailDate).Format('yyyy年MM月dd日');
				this.goInfo.week = this.weekCfg[new Date(this.goInfo.sailDate).getDay()];
				this.backInfo.date = new Date(this.backInfo.sailDate).Format('yyyy年MM月dd日');
				this.backInfo.week = this.weekCfg[new Date(this.backInfo.sailDate).getDay()];

				this.goInfo.seatClasses.forEach((s, si) => {
					this.$set(this.goInfo.seatClasses[si], 'shipselected', false);
				})
				this.backInfo.seatClasses.forEach((s, si) => {
					this.$set(this.backInfo.seatClasses[si], 'shipselected', false);
				})
			},
			getIsLocal() {
				if (!uni.getStorageSync('userInfo')) return
				this.$api.get('/api/commonPerson/isLocalCount', {
					openId: JSON.parse(uni.getStorageSync('userInfo')).openId,
					isLocal: 1
				}).then(res => {
					if (res.data.code === 0) {
						this.hasLocal = res.data.data > 0 ? true : false;
					} else this.$showModal(res.data.msg);
				})
			},
			selectTicket(idx, type) {
				this.$login().then(res => {
					if (res === 0) {
						if (type == 1) {
							this.goInfo.seatClasses.forEach((s, i) => {
								this.$set(this.goInfo.seatClasses[i], 'shipselected', i === idx ? true :
									false)
							})
						} else {
							this.backInfo.seatClasses.forEach((s, i) => {
								this.$set(this.backInfo.seatClasses[i], 'shipselected', i === idx ? true :
									false)
							})
						}
					} else this.$refs['phoneNumber'].show = true;
				})
			},
			toNext() {
				let goShipInfo = this.goInfo.seatClasses.find(g => g.shipselected == true);
				let backShipInfo = this.backInfo.seatClasses.find(g => g.shipselected == true);
				if (!goShipInfo) return this.$showToast('请选择第1程舱位');
				if (!backShipInfo) return this.$showToast('请选择第2程舱位');
				this.goInfo.cangInfo = goShipInfo;
				this.backInfo.cangInfo = backShipInfo;
				this.$emit('toPassengerPayTwo',{goInfo:this.goInfo,backInfo:this.backInfo});
				// let url = '/pagesIndex/steamerTicket/passengerPay?item=' + JSON.stringify(this.goInfo) + '&backItem=' +
				// 	JSON.stringify(this.backInfo);
				// if (uni.getStorageSync('shipType') == 2) {
				// 	url = '/pagesIndex/steamerTicket/passengerPayCar?item=' + JSON.stringify(this.goInfo) + '&backItem=' +
				// 		JSON.stringify(this.backInfo);
				// }
				// uni.navigateTo({
				// 	url
				// });
			}
		}
	}
</script>

<style scoped lang="less">
	.page {
		background: #F5F8FA;
		padding-top: 10rpx;
		padding-bottom: 120rpx;
		height: 100%;

		.hander-one {
			background-image: url('https://i.ringzle.com/file/20240129/323bce42369f4d228d5653b8a4249095.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 468rpx;
			box-sizing: border-box;
		}

		.ship_info {
			// height: 100%;
			width: calc(100% - 48rpx);
			background: #FFFFFF;
			border-radius: 16rpx;
			box-sizing: border-box;
			margin: 0 24rpx;
			padding: 30rpx 24rpx;
			padding-left: 88rpx;

			.si_item {
				position: relative;
				.sii_no{
					width: 40rpx;
					height: 120rpx;
					background: #F0F8F6;
					border-radius: 8rpx;
					border: 1rpx solid #007A69;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					position: absolute;
					left: -60rpx;
					top: 0;
					span{
						font-family: PingFangSC, PingFang SC;
						font-size: 24rpx;
						color: #007A69;
						&:nth-child(2){
							margin: 5rpx 0;
						}
					}
					
					&.sii_no_2{
						top: 24rpx;
					}
				}
				.sii_top {
					display: flex;
					align-items: center;

					image {
						width: 36rpx;
						height: 36rpx;
					}

					.siit_texts {
						margin-left: 10rpx;
						display: flex;
						align-items: center;

						text {
							font-size: 24rpx;
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							color: #111111;

							&:nth-child(2) {
								margin-left: 16rpx;
							}

							&:last-child {
								font-weight: 400;
								color: #999999;
								margin-left: 17rpx;
							}
						}
					}
				}

				.sii_info {
					display: flex;
					margin-top: 24rpx;
					padding-left: 45rpx;

					.siii_left {
						font-size: 30rpx;
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						color: #333333;
					}

					.siii_right {
						margin-left: 19rpx;
						display: flex;
						align-items: center;

						image {
							width: 8rpx;
							height: 68rpx;
						}

						.siir_place {
							margin-left: 23rpx;
							display: flex;
							flex-direction: column;

							text {
								font-size: 30rpx;
								font-family: PingFang-SC, PingFang-SC;
								font-weight: bold;
								color: #333333;

								&:last-child {
									margin-top: 36rpx;
								}
							}
						}
					}
					
					&.ta_car_ship{
						align-items: center;
						.ta_time{
							display: flex;
							flex-direction: column;
							align-items: center;
							margin-top: -20rpx;
							text{
								font-family: PingFang-SC, PingFang-SC;
								font-weight: bold;
								font-size: 30rpx;
								color: #333333;
								margin-top: 28rpx;
								&:first-child{
									margin-top: -8rpx;
								}
							}
						}
						.ta_addr{
							padding-left: 20rpx;
							display: flex;
							align-items: center;
							image{
								width: 8rpx;
								height: 128rpx;
							}
							&>view{
								margin-top:0;
								display: flex;
								flex-direction: column;
								padding-left: 23rpx;
								text{
									margin-top: 28rpx;
									font-size: 30rpx;
									font-family: PingFang-SC-Bold, PingFang-SC;
									font-weight: bold;
									color: #333333;
									&:first-child{
										margin-top: 0;
									}
								}
							}
						}
					}
				}

				&:last-child {
					border-top: 1rpx solid rgba(112, 112, 112, .1);
					padding-top: 24rpx;
					margin-top: 24rpx;
				}
			}
		}

		.seat_info {
			height: 100%;
			width: calc(100% - 48rpx);
			margin: 0 24rpx;
			margin-bottom: 20rpx;

			.si_pre {
				width: 100%;
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 24rpx 24rpx 20rpx;
				box-sizing: border-box;
				margin-top: 20rpx;

				.sip_title {
					font-size: 32rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}

				.sip_box {
					margin-top: 24rpx;
					display: flex;
					align-items: center;
					overflow-x: auto;

					.cct_items {
						width: 228rpx;
						margin-left: 20rpx;
						position: relative;
						border: 1rpx solid #EFEFEF;
						border-radius: 16rpx;

						&:first-child {
							margin-left: 0;
						}

						&>image {
							width: 100%;
							height: 132rpx;
						}

						.cct_info {
							padding: 16rpx 20rpx 18rpx;
							box-sizing: border-box;

							.ccti_title {
								font-size: 26rpx;
								font-family: PingFang-SC, PingFang-SC;
								font-weight: bold;
								color: #333333;
							}

							.ccti_tickets {
								width: 100%;
								height: 90rpx;
								display: flex;
								flex-direction: column;

								text {
									font-size: 20rpx;
									font-family: PingFangSC, PingFang SC;
									font-weight: 400;
									color: #808080;
									margin-top: 10rpx;
								}
							}

							.ccti_price {
								font-size: 20rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								color: #FF4141;

								text {
									font-size: 30rpx;
									font-family: PingFang-SC, PingFang-SC;
									font-weight: bold;
									color: #FF4141;
								}
							}
						}

						&.cactive {

							.ccti_title,
							.ccti_price,
							text {
								color: #AAAAAA !important;
							}
						}

						&.sactive_go {
							border: 2rpx solid #007A69;
						}

						&.sactive_back {
							border: 2rpx solid #007A69;
						}

						.ccti_bg {
							width: 48rpx;
							height: 38rpx;
							position: absolute;
							bottom: -2rpx;
							right: -2rpx;
						}
					}
				}
			}
		}

		.bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 120rpx;
			background: #fff;
			box-shadow: 0rpx -1rpx 8rpx 0rpx rgba(0, 0, 0, 0.06);
			padding: 0 24rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			z-index: 99;

			.btn {
				width: 100%;
				height: 88rpx;
				background: #007A69;
				border-radius: 44rpx;
				line-height: 88rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				color: #FFFFFF;
				letter-spacing: 2rpx;
				margin-top: 16rpx;
			}
		}
	}
</style>